<template>
	<scroll-view scroll-y class="my" :style="{paddingTop:pagePaddingTop}">

		<!-- 区域1 -->
		<view class="flex flex-ver flex-sb mb50">
			<view class="flex flex-ver color-white">
				<image :src="userAvatar" class="us-avatar mr20"></image>
				<view>
					<view class="fs37 fwb mb14">{{nickname}}</view>
					<view class="fs25">账号：{{username}}</view>
				</view>
			</view>
			<view class="top-btn-wrapper flex flex-center" @click="$common.navTo('/pages/setting/setting')">
				<view class="mr6 main-color fs27">设置</view>
				<image class="top-img" :src="staticImage.turn"></image>
			</view>
		</view>

		<view v-if="isLogin">

			<!-- 会员卡区域 -->
			<view class="member-area flex flex-ver flex-sb" v-if="$common._empty(vipInfo)" @click="$common.navTo('/pages/member/index')">
				<view>开通会员</view>
				<image :src="backIcon" class="back-icon"></image>
			</view>
			<view class="member-area flex flex-ver flex-sb" v-else @click="$common.navTo('/pages/member/index')">
				<image :src="vipInfo.image" class="img"></image>
				<view class="relative">
					<view class="mb16">{{vipInfo.name}}</view>
					<view class="fs22">有效期至：{{vipInfo.end_time}}</view>
				</view>
				<image :src="backIcon" class="back-icon"></image>
			</view>

			<view class="blue-bg"></view>
			<!-- 区域2 -->
			<view class="info-area main-color flex flex-sb">
				<view>
					<view class="fs29 black-color fwb mb40">昨日收益积分</view>
					<view class="integral mb30">{{info.yesterday}}</view>
					<view class="integral-btn" @click="$common.navTo('/pages/integral/list')">查看收益详情</view>
				</view>

				<view class="pt37">
					<view class="flex flex-ver mb50">
						<view class="fwb">
							<view class="fs29 black-color">累计收益积分</view>
							<view class="fs33 fwb">{{info.all}}</view>
						</view>
						<view class="ml5 inte-detail" @click="$common.navTo('/pages/integral/list')">收益详情</view>
					</view>

					<view class="flex flex-ver">
						<view class="fwb">
							<view class="fs29 black-color">本月收益积分</view>
							<view class="fs33 fwb">{{info.month}}</view>
						</view>
						<view class="ml5 inte-detail" @click="$common.navTo('/pages/integral/list')">收益详情</view>
					</view>
				</view>
			</view>

			<!-- 区域3 -->
			<view class="user-has-count-area color-white fs27 flex flex-sb">
				<view class="flex flex-ver">
					<view class="fwb ac">
						<view class="mb10">水机数量</view>
						<view class="fs29">{{waterMachinesCount}}</view>
					</view>
					<view class="water-detail-btn main-color" @click="$common.navTo('/pages/machine/detail')">水机详情</view>
				</view>

				<view class="flex flex-ver">
					<view class="fwb ac">
						<view class="mb10">账户积分</view>
						<view class="fs29">0</view>
					</view>
					<view class="water-detail-btn main-color" @click="$common.navTo('/pages/withdrawal/index')">提现
					</view>
				</view>
			</view>


			<!-- test -->
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号授权</button> -->


			<!-- 区域4 -->
			<view class="mt18 opt-area flex flex-sb flex-wrap">
				<view class="it flex flex-ver" v-for="(item,index) in optList" :key="index">
					<image :src="item.icon" class="mr16"></image>
					<view>
						<view class="fs29">{{item.title}}</view>
						<view class="fs25 name-color">{{item.content}}</view>
					</view>
				</view>
			</view>

		</view>


		<tabBar :jumpType="4"></tabBar>
	</scroll-view>
</template>

<script>
	import tabBar from '@/components/tabBar/myTabbar.vue'
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				vipInfo:{},
				waterMachinesCount:0,
				level:1, //1 普通 2白银 3 黄金
				backIcon: this.$common.imgUrl() + '/img/back.png',
				isLogin: uni.getStorageSync('token') ? true : false,
				userAvatar: uni.getStorageSync('userAvatar') ? uni.getStorageSync('userAvatar') : '',
				nickname: uni.getStorageSync('nickname') ? uni.getStorageSync('nickname') : '用户名称',
				username: uni.getStorageSync('username') ? uni.getStorageSync('username') : 'xxxxxx',
				info: {},
				pagePaddingTop: 0,
				optList: [{
						title: '邀请码',
						content: '邀请好友赚收益',
						icon: this.$common.imgUrl() + '/img/home/01@2x.png',
						href: '',
					},
					{
						title: '邀请详情',
						content: '我邀请的好友',
						icon: this.$common.imgUrl() + '/img/home/02@2x.png',
						href: '',
					},
					{
						title: '邀请设备',
						content: '我邀请的设备',
						icon: this.$common.imgUrl() + '/img/home/03@2x.png',
						href: '',
					},
					{
						title: '邀请人收益',
						content: '邀请设备收益',
						icon: this.$common.imgUrl() + '/img/home/04@2x.png',
						href: '',
					},
					{
						title: '本月排行榜',
						content: '每月1号0点更新',
						icon: this.$common.imgUrl() + '/img/home/05@2x.png',
						href: '',
					},
					{
						title: '累积排行榜',
						content: '累积收益排行榜',
						icon: this.$common.imgUrl() + '/img/home/06@2x.png',
						href: '',
					},
				],
				staticImage: {
					turn: this.$common.imgUrl() + '/img/home/turn@2x.png',
				}
			}
		},

		async onLoad(query) {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.pagePaddingTop = menuButtonInfo.top + menuButtonInfo.height + 'px';
			await this.getVipInfo();
			await this.getInfo();
			await this.apparatusCount();
		},
		onShow() {},
		mounted() {},
		methods: {
			async getVipInfo() {
				const res = await this.$http({
					method: 'get',
					url: this.$api.vipInfo,
					data: {

					},
				});
				this.vipInfo = res.data;
			},
			getPhoneNumber(e) {
				console.log(e);
			},
			async getInfo() {
				const res = await this.$http({
					method: 'get',
					url: this.$api.userScoreStatistics,
					data: {

					},
				});
				this.info = res.data;
			},
			async apparatusCount() {
				const res = await this.$http({
					method: 'get',
					url: this.$api.apparatusCount,
				});
				this.waterMachinesCount = res.data.count;
			},
		}
	}
</script>

<style lang="scss">
	// @import url();
	// @import './uni.scss';
	// @import '@/mixin.scss';
	// @import './common/css/public.css';
	.my {
		width: 100%;
		height: calc(100vh - 140rpx);
		background: url($baseUrl + '/img/home/bg@2x.png') no-repeat center / 100% 100%;
		padding: 0 30rpx 0;

		.member-area {
			background-color: #FFFFFF;
			border-radius: 14rpx;
			font-size: 26rpx;
			padding: 30rpx 40rpx;
			margin-bottom: 20rpx;
			position: relative;
			.img{
				width: 100%;
				height:100%;
				position: absolute;
				top:0;left:0;
			}
			.title {
				position: absolute;
				top: 20rpx;
				left: 40rpx;
			}

			.content {
				position: absolute;
				bottom: 20rpx;
				left: 40rpx;
			}
		}

		.level1{
			background: url($baseUrl + '/img/member/01@2x.png') no-repeat center / 100% 100%;
		}

		.level2{
			background: url($baseUrl + '/img/member/02@2x.png') no-repeat center / 100% 100%;
		}

		.back-icon {
			width: 12rpx;
			height: 21rpx;
			transform: rotate(180deg);
		}



		.top-btn-wrapper {
			width: 181rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background-image: linear-gradient(to right, #E8F3FD, #C9E3FD);
			border-radius: 27rpx;
		}

		.top-img {
			width: 28rpx;
			height: 20rpx;
		}

		.us-avatar {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
		}

		.info-area {
			margin-top: -62rpx;
			position: relative;
			z-index: 2;
			width: 100%;
			height: 408rpx;
			background: url($baseUrl + '/img/home/jifenbg@2x.png') no-repeat center / 100% 100%;
			padding: 60rpx 26rpx 20rpx 40rpx;

			.integral {
				font-size: 70rpx;
				font-weight: bold;
			}

			.integral-btn {
				width: 222rpx;
				height: 52rpx;
				line-height: 45rpx;
				text-align: center;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(61, 165, 255, 0.3);
				font-size: 27rpx;
				border-radius: 26rpx;
				border: 2rpx solid rgba(48, 159, 255, 0.5);
			}

			.inte-detail {
				width: 136rpx;
				height: 52rpx;
				line-height: 45rpx;
				text-align: center;
				font-size: 27rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(61, 165, 255, 0.3);
				border-radius: 26rpx;
				border: 2px solid rgba(48, 159, 255, 0.5);
			}
		}

		.blue-bg {
			top: 20rpx;
			height: 68rpx;
			background-color: #6DFEFF;
			border-top-right-radius: 22rpx;
			position: relative;
			z-index: 1;
		}

		.user-has-count-area {
			width: 100%;
			height: 170rpx;
			background: #3DA5FF;
			border-radius: 22rpx;
			padding: 0 36rpx;
			margin-top: -60rpx;
			position: relative;
			z-index: 3;
      .water-detail{
        width: 50%;

      }
			.water-detail-btn {
				width: 136rpx;
				height: 52rpx;
				line-height: 52rpx;
				margin-left: 20rpx;
				text-align: center;
				background: rgba(255, 255, 255, 0.7);
				box-shadow: -3rpx 4rpx 5rpx 0rpx rgba(0, 88, 164, 0.28);
				border-radius: 26rpx;
			}
		}


		.opt-area {
			.it {
				width: 334rpx;
				height: 170rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				background-color: #fff;
				padding: 40rpx 26rpx;
				margin-bottom: 20rpx;

				image {
					width: 87rpx;
					height: 87rpx;
				}
			}
		}
	}
</style>
